<template>
    <div>
        <h1>食谱信息显示</h1>
        <a href="/add">食谱新增</a>
        <a href="/show">理疗信息</a>
    </div>
    菜谱标题:<input type="text" v-model="can.name">
    分类:<select v-model="can.tid">
                        <option value="0">请选择</option>
                        <option v-for="d in bangdata" :value="d.Tid">{{d.TypeName}}</option>
                    </select>
    <input type="button" value="查询" @click="show">
    <table class="table">
        <thead>
            <tr>
                <td>Id</td>
                <td>菜谱</td>
                <td>图片</td>
                <td>标签</td>
                <td>详情</td>
                <td>分类</td>
                <td>日期</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="d in data">
                <td>{{d.Id}}</td>
                <td>{{d.CookName}}</td>
                <td><img :src="axios.defaults.baseURL+d.Img" style="width: 50px;"></td>
                <td>{{d.Bq==1?"好菜":"烂菜"}}</td>
                <td>{{d.Xq}}</td>
                <td>{{d.TypeName}}</td>
                <td>{{d.CreateTime}}</td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,onMounted} from 'vue';
onMounted(() => {
    show();
    bang();
})
const bangdata=ref({})
const bang=()=>{
    axios.get("/api/Type/GetTypes",bangdata.value).then(res=>{
        bangdata.value=res.data;
    })
}
const biaolist=([{id:1,name:'好菜'},{id:2,name:'烂菜'}])
const data=ref([{
    "Id": 0,
    "CookName": "",
    "Img": "string",
    "Bq": 0,
    "Tid": 0,
    "CreateTime": "",
    "Xq": "",
    "TypeName": ""
}])
const can=ref({
    name:'',
    tid:0
})
const show=()=>{
    axios.get("/api/Cook/CookShow",{params:can.value}).then(res=>{
        data.value=res.data;
    })
}





</script>

<style scoped>

</style>